<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/TCubeTTATemplate.xhtml">

    <ui:define name="contentInsert">
        <h3><h:outputText value="Sales" /></h3>
        <br/>

        <h:form id="salesChartFrom">
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="2">
                    <h:outputText value="Select Time range: " style="font-weight: bold; font-size: medium; font-family: Arial"/>
                    <p:ajaxStatus style="width:20px;height:20px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns="6">
                    <h:selectOneMenu id="salesYearStart" value="#{tCubePIPSalesMB.salesYearStart}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{tCubePIPSalesMB.startYears}" />
                        <p:ajax update="salesMonthStart"   
                                listener="#{tCubePIPSalesMB.handleStartYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="salesMonthStart" value="#{tCubePIPSalesMB.salesMonthStart}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{tCubePIPSalesMB.startMonths}" /> 
                    </h:selectOneMenu>
                    <h:outputText value="-----TO-----" style="text-align: center"/>
                    <h:selectOneMenu id="salesYearEnd" value="#{tCubePIPSalesMB.salesYearEnd}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{tCubePIPSalesMB.endYears}" />
                        <p:ajax update="salesMonthEnd"   
                                listener="#{tCubePIPSalesMB.handleEndYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="salesMonthEnd" value="#{tCubePIPSalesMB.salesMonthEnd}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{tCubePIPSalesMB.endMonths}" />
                    </h:selectOneMenu>
                    <p:commandButton value="Update" actionListener="#{tCubePIPSalesMB.updateStartEnd}"
                                     update="salesChartFrom"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="salesChart" model="#{tCubePIPSalesMB.salesModel}"
                         titleX="Month" titleY="Sales" width="700px" height="400px"/>
            <br/>
            <h3><h:outputText value="Sales Prediction" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="3">
                    <h:outputText value="Predict using historical months since"/>
                    <h:selectOneMenu value="#{tCubePIPSalesMB.numHistoricalMonths}">
                        <f:selectItem itemLabel="3 months ago" itemValue="3"/>
                        <f:selectItem itemLabel="6 months ago" itemValue="6"/>
                        <f:selectItem itemLabel="1 year ago" itemValue="12"/>
                        <f:selectItem itemLabel="18 months ago" itemValue="18"/>
                        <f:selectItem itemLabel="2 year ago" itemValue="24"/>
                        <f:selectItem itemLabel="3 year ago" itemValue="36"/>
                        <f:selectItem itemLabel="The beginning of time" itemValue="100"/>
                    </h:selectOneMenu>
                    <h:outputText/>
                    <h:outputText value="Enter number of months to predict"/>
                    <h:inputText value="#{tCubePIPSalesMB.numMonthToPred}"/>
                    <p:commandButton value="Update" action="#{tCubePIPSalesMB.updatePrediction()}"
                                     update="salesPredChart,saleCorCoef"/>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="Correlation Coefficient:"/>
                    <h:outputText id="saleCorCoef" value="#{tCubePIPSalesMB.saleCorCoefStr}"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="salesPredChart"
                         model="#{tCubePIPSalesMB.salesWithPredModel}"  
                         titleX="Month" titleY="Sales" width="700px" height="400px" />
        </h:form>

        <h3><h:outputText value="Reservations" /></h3>
        <br/>
        <h:form>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="2">
                    <h:outputText value="Select Time range: "/>
                    <p:ajaxStatus style="width:20px;height:20px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns ="6">
                    <h:selectOneMenu id="rYearStart" value="#{tCubePIPReservationMB.reservationsYearStart}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{tCubePIPReservationMB.startYears}" />
                        <p:ajax update="rMonthStart"   
                                listener="#{tCubePIPReservationMB.handleStartYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="rMonthStart" value="#{tCubePIPReservationMB.reservationsMonthStart}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{tCubePIPReservationMB.startMonths}" /> 
                    </h:selectOneMenu>
                    <h:outputText value="-----TO-----" style="text-align: center"/>
                    <h:selectOneMenu id="rYearEnd" value="#{tCubePIPReservationMB.reservationsYearEnd}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{tCubePIPReservationMB.endYears}" />
                        <p:ajax update="rMonthEnd"   
                                listener="#{tCubePIPReservationMB.handleEndYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="rMonthEnd" value="#{tCubePIPReservationMB.reservationsMonthEnd}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{tCubePIPReservationMB.endMonths}" />
                    </h:selectOneMenu>
                    <p:commandButton value="Update" actionListener="#{tCubePIPReservationMB.updateStartEnd}"
                                     update="reservationsChart"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="reservationsChart"
                         model="#{tCubePIPReservationMB.reservationModel}"
                         titleX="Month" titleY="Reservations" width="700px" height="400px" />
            <br/>
            <h3><h:outputText value="Reservation Prediction" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="3">

                    <h:outputText value="Predict using historical months since"/>
                    <h:selectOneMenu value="#{tCubePIPReservationMB.numHistoricalMonths}">
                        <f:selectItem itemLabel="3 months ago" itemValue="3"/>
                        <f:selectItem itemLabel="6 months ago" itemValue="6"/>
                        <f:selectItem itemLabel="1 year ago" itemValue="12"/>
                        <f:selectItem itemLabel="18 months ago" itemValue="18"/>
                        <f:selectItem itemLabel="2 year ago" itemValue="24"/>
                        <f:selectItem itemLabel="3 year ago" itemValue="36"/>
                        <f:selectItem itemLabel="The beginning of time" itemValue="100"/>
                    </h:selectOneMenu>
                    <h:outputText/>
                    <h:outputText value="Enter number of months to predict"/>
                    <h:inputText value="#{tCubePIPReservationMB.numMonthToPred}"/>
                    <p:commandButton value="Update" action="#{tCubePIPReservationMB.updatePrediction()}"
                                     update="reservationsPredChart,resCorCoef"/>

                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="Correlation Coefficient:"/>
                    <h:outputText id="resCorCoef" value="#{tCubePIPReservationMB.resCorCoefStr}"/>
                </h:panelGrid>

            </p:panel>
            <p:lineChart id="reservationsPredChart"
                         model="#{tCubePIPReservationMB.reservationWithPredModel}"
                         titleX="Month" titleY="Reservations" width="700px" height="400px" />

        </h:form>
    </ui:define>
</ui:composition>
